<%@ include file="../views/taglib.jsp" %>

<style>
	.newPsswordStyleColor {
		color: red;
	}
</style>

<style>
	.error {
		color: #ff0000;
		font-size: italic;
		font-weight: bold;
	}
</style>

<script type="text/javascript">
	$(document).ready(function(){
		$("#table_update_info").dataTable();
		
		$(".editOpenModal").click(function(e){
			var href = $(this).attr("href");
			e.preventDefault();
			$.ajax({
				type: 'get',
				url: href,
				dataType: 'json',
				success: function(user){
					document.getElementById("id").value = user.id;
					document.getElementById("loginId").value = user.loginId;
					document.getElementById("image").value = user.image;
					document.getElementById("password").value = user.password;
					document.getElementById("cardnumberid").value = user.cardnumberid;
					document.getElementById("firstname").value = user.firstname;
					document.getElementById("lastname").value = user.lastname;
					document.getElementById("midname").value = user.midname;
					document.getElementById("phone1").value = user.phone1;
					document.getElementById("phone2").value = user.phone2;
					document.getElementById("address1").value = user.address1;
					document.getElementById("address2").value = user.address2;
					document.getElementById("email1").value = user.email1;
					document.getElementById("email2").value = user.email2;
					document.getElementById("roleId").value = user.roleId;
					document.getElementById("statusId").value = user.statusId;
				},
				error: function(){      
					   alert('Error while request..');
				}
			});
			$("#modalEditInfo").modal();
		});
	});
</script>

<script type="text/javascript">
	$(document).ready(function(){
		function getExtension(filename){
			var parts = filename.split('.');
			return parts[parts.length - 1];
		}

		function isImage(filename){
			var ext = getExtension(filename);
			switch (ext.toLowerCase()){
				case 'jpg':
				case 'png':
				case 'bmp':
				case 'gif':
					return true;
			}
			return false;
		}
		
		$("#fileUpload").bind('change', function(){
			var filename = this.files[0].name;
			console.log(filename);
			if(!isImage(filename)){
				document.getElementById("file_upload_message").innerHTML = "Sorry ! Choose type image: jpn, png, gif, bmp";
				document.getElementById("file_upload_message").style.color = "red";
				document.getElementById("button_save").disabled = true;
			} else {
				var size = this.files[0].size;
				if(size > 524288){
					document.getElementById("file_upload_message").innerHTML = "Sorry ! Size of file upload < 500 KB";
					document.getElementById("file_upload_message").style.color = "red";
					document.getElementById("button_save").disabled = true;
				} else {
					document.getElementById("file_upload_message").innerHTML = "Ok ! You can upload your file";
					document.getElementById("file_upload_message").style.color = "green";
					document.getElementById("button_save").disabled = false;
				}
			}
		});
	});
</script>

<script>
	$(document).ready(function(){
		$(".updateInforModal").validate({
			rules: {
				cardnumberid: {
					required: true,
					remote : {
						url : "<c:url value='/create/checkcardnumber'/>",
						type: 'post',
						data: {
							cardnumberid: function(){
								return $("#cardnumberid").val();
							}
						}
					}
				},
				passwordNew: {
					required: false,
					minlength : 8,
				},
				passwordNewAgain: {
					required: false,
					minlength : 8,
					equalTo: "#passwordNew"
				},
				firstname: {
					required : true,
					remote : {
						url: "<c:url value='/create/checkfirstname' />",
						type: 'post',
						data: {
							firstname: function(){
								return $("#firstname").val();
							}
						}
					}
				},
				lastname: {
					required : true,
					remote : {
						url: "<c:url value='/create/checklastname' />",
						type: 'post',
						data: {
							lastname: function(){
								return $("#lastname").val();
							}
						}
					}
				},
				midname: {
					required : false,
					remote : {
						url: "<c:url value='/create/checkmidname' />",
						type: 'post',
						data: {
							midname: function(){
								return $("#midname").val();
							}
						}
					}
				},
				phone1:{
					required: true,
					remote: {
						url: "<c:url value='create/checkphonefirst' />",
						type: 'post',
						data: {
							phone1: function(){
								return $("#phone1").val();
							}
						}
					}
				},
				phone2:{
					required: false,
					remote: {
						url: "<c:url value='create/checkphonesecond' />",
						type: 'post',
						data: {
							phone2: function(){
								return $("#phone2").val();
							}
						}
					}
				},
				address1: {
					required: true
				},
				email1 : {
					required : true,
					email : true
				},
				email2 : {
					required : false,
					email : true
				}
			},
			messages : {
				cardnumberid: {
					remote: "Card number Id must 9 numberic. Example: 135548878"
				},
				firstname: {
					remote : "Name only contains words"
				},
				lastname: {
					remote : "Name only contains words"
				},
				midname: {
					remote : "Name only contains words"
				},
				phone1 : {
					remote : "Phone only digit 10 or 11 number"
				},
				phone2 : {
					remote : "Phone only digit 10 or 11 number"
				}
			}
		});
	});
</script>

<h2 class="text-info text-center">List User</h2>
<c:if test="${not empty message}">
	<div class="alert alert-success">${message}</div>
</c:if>
<table class="table table-striped table-bordered table-hover" id="table_update_info">
	 <thead>
		 <tr>
		 	<th>Login Id</th>
		 	<th>Password</th>
		 	<th>ID Card Number</th>
		 	<th>First Name</th>
		 	<th>Last Name</th>
		 	<th>Phone 1</th>
		 	<th>Address 1</th>
		 	<th>Email 1</th>
		 	<th>Edit Information</th>
		 <tr>
	 </thead>
	 <tbody>
	 	<c:forEach items="${users}" var="user">
	 		<tr>
	 			<td><span class="glyphicon glyphicon-user"></span> ${user.loginId}</td>
	 			<td>${user.password.substring(0,5)}</td>
	 			<td>${user.cardnumberid}</td>
	 			<td>${user.firstname}</td>
	 			<td>${user.lastname}</td>
	 			<td>${user.phone1}</td>
	 			<td>${user.address1}</td>
	 			<td>${user.email1}</td>
	 			<td><a href="/finalproject/updateinfo/edit/${user.loginId}" class="btn btn-danger editOpenModal"><span class="glyphicon glyphicon-edit"></span> Edit</a></td>
	 		</tr>
	 	</c:forEach>
	 </tbody>
</table>

<!-- Modal -->
<form:form cssClass="form-horizontal updateInforModal" role="form" action="${pageContext.request.contextPath}/updateinfo/update" modelAttribute="usertemp" method="post" enctype="multipart/form-data">
<div class="modal fade" id="modalEditInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Edit Information</h4>
      </div>
      <div class="modal-body">
       
       	   <form:hidden cssClass="form-control" path="id" />
       	   
		   <form:hidden cssClass="form-control" path="loginId" />
		   
		   <form:hidden cssClass="form-control" path="image" />
		  
		   <form:hidden cssClass="form-control" path="password" />
		   
		   <form:hidden cssClass="form-control" path="roleId" />
		   
		   <form:hidden cssClass="form-control" path="statusId" />
		    
		   <div class="form-group">
		    <label for="inputIdCardNumber" class="col-sm-3 control-label">Id Card Number</label>
		    <div class="col-sm-9">
		      <form:input cssClass="form-control" path="cardnumberid" />
		      <form:errors path="cardnumberid" cssClass="error"/>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputIdNewPassword" class="col-sm-3 control-label newPsswordStyleColor">New Password</label>
		    <div class="col-sm-9">
		      <input type="password" class="form-control" name="passwordNew" id="passwordNew"/>
		      <form:errors path="password" cssClass="error"/>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputIdNewPassword" class="col-sm-3 control-label newPsswordStyleColor">Password Again</label>
		    <div class="col-sm-9">
		      <input type="password" class="form-control" name="passwordNewAgain" id="passwordNewAgain"/>
		      <form:errors path="password" cssClass="error"/>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputFirstName" class="col-sm-3 control-label">First Name</label>
		    <div class="col-sm-9">
		      <form:input cssClass="form-control" path="firstname" />
		      <form:errors path="firstname" cssClass="error"/>
		    </div>
		  </div>
		   <div class="form-group">
		    <label for="inputLastName" class="col-sm-3 control-label">Last Name</label>
		    <div class="col-sm-9">
		      <form:input cssClass="form-control" path="lastname" />
		      <form:errors path="lastname" cssClass="error"/>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputMiddleName" class="col-sm-3 control-label">Middle Name</label>
		    <div class="col-sm-9">
		      <form:input cssClass="form-control" path="midname" />
		      <form:errors path="midname" cssClass="error"/>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPhone1" class="col-sm-3 control-label">Phone 1 *</label>
		    <div class="col-sm-9">
		      <form:input cssClass="form-control" path="phone1"/>
		      <form:errors path="phone1" cssClass="error"/>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPhone2" class="col-sm-3 control-label">Phone 2</label>
		    <div class="col-sm-9">
		      <form:input cssClass="form-control" path="phone2"/>
		      <form:errors path="phone2" cssClass="error"/>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputAddress1" class="col-sm-3 control-label">Address 1*</label>
		    <div class="col-sm-9">
		      <form:input cssClass="form-control" path="address1" />
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputAddress2" class="col-sm-3 control-label">Address 2</label>
		    <div class="col-sm-9">
		      <form:input cssClass="form-control" path="address2" />
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputEmail1" class="col-sm-3 control-label">Email 1*</label>
		    <div class="col-sm-9">
		      <form:input cssClass="form-control" path="email1" />
		      <form:errors path="email1" cssClass="error"/>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputEmail2" class="col-sm-3 control-label">Email 2</label>
		    <div class="col-sm-9">
		      <form:input cssClass="form-control" path="email2" />
		      <form:errors path="email2" cssClass="error"/>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputAvatar" class="col-sm-3 control-label">Avatar</label>
		    <div class="col-sm-9">
		      <input type="file" class="filestyle" name="fileUpload" id="fileUpload" data-buttonName="btn-primary">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputAvatar" class="col-sm-9 control-label" id="file_upload_message"></label>
		  </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" id="button_save">Save changes</button>
      </div>
    </div>
  </div>
</div>
</form:form>